<template>
  <div id="order" class="container">
    <h3 class="title"><span />标签生成器</h3>
    <el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane label="站点配置" name="first">
        <div class="content">
          <div class="left">
            <h4>基础配置</h4>
            <el-row :gutter="20">
              <el-col
                v-for="item in tagdata"
                :key="item.id"
                :span="6"
                class="col"
              >
                <a href="javascript:;">{{ item.title }}</a>
              </el-col>

            </el-row>
            <h4>其他</h4>
            <el-form>
              <el-form-item label="默认值">
                <el-input />
              </el-form-item>
              <el-form-item label="处理函数">
                <el-input />
              </el-form-item>
              <el-form-item>

                <el-button type="primary" size="small">生成模板标签</el-button>
                <el-button class="dele" size="small">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <h4>标签预览</h4>
            <div style="margin-top:15px; margin-bottom:20px">
              <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" style="margin-bottom:15px" />
              <el-button class="dele" size="small">渲染标签结果</el-button>
              <el-button type="primary" size="small">复制标签</el-button>
            </div>
            <h4>执行结果</h4>
            <div style="margin-top:15px">
              <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" style="margin-bottom:15px" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文章列表" name="second">
        <List v-if="activeName == 'second'" />
      </el-tab-pane>
      <el-tab-pane label="栏目列表" name="third">栏目列表</el-tab-pane>
      <el-tab-pane label="单页面列表" name="fourth">单页面列表</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import tagApi from '@/api/tag.js'
import List from './components/list.vue'
export default {
  components: { List },
  data() {
    return {
      activeName: 'first',
      tagdata: [
        { title: '平台会员', id: 1 },
        { title: '首页关键字', id: 2 },
        { title: '公众号二维码公众号二维码公众号二维码', id: 3 },
        { title: '会员个人主页', id: 4 },
        { title: '标志字典', id: 5 },
        { title: '搜索方式', id: 6 },
        { title: '栏目授权', id: 7 },
        { title: '支付模块', id: 8 }
      ]
    }
  },
  created() {

  },
  mounted() {

  },
  updated() {

  },
  methods: {
    handleClick(val) {

    }
  }
}
</script>
<style lang='scss'>
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header{
  margin: 0;
}
.tabs.el-tabs--card>.el-tabs__header{
  border-bottom: 0;
}

</style>
<style scoped lang='scss'>
.tabs{
  padding: 20px;
    .content{
    display: flex;
    justify-content: left;
    padding-top: 20px;
    padding-left:15px;
    background-color: #fff;
    .left{
        width: 50%;
        margin-right: 20px;
    }
    .right{
        width: calc(50% - 40px);
    }
    h4{
      font-weight: normal;
        padding-bottom: 10px;
        border-bottom: solid 1px #eee;
    }
}
.el-row{
    margin-top: 15px;
    min-height: 400px;
}
.col{
    max-width: 80%;
    margin-bottom: 5px;
    white-space: nowrap;
    a{
        font-size: 12px;
        color: #444;
        background-color: #f4f4f4;
        border: solid 1px #ddd;
        border-radius: 2px;
        padding: 7px 10px;
        display: inline-block;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

}

</style>
